<template>
  <div>
    <el-upload
      class="upload-demo"
      ref="upload"
      action="#"
      :on-change="handleChange"
      :show-file-list="false"
      :auto-upload="false"
      multiple
    >
      <el-button slot="trigger" size="small" type="primary"
        >选取验证码图片</el-button
      >
      <div slot="tip" class="el-upload__tip">
        只能上传jpg/png文件，且不超过500kb
      </div>
    </el-upload>

    <el-upload
      class="upload-demo"
      ref="templateUpload"
      action="#"
      :on-change="templateHandleChange"
      :show-file-list="false"
      :auto-upload="false"
      multiple
    >
      <el-button slot="trigger" size="small" type="primary"
        >选取模板图片</el-button
      >
      <div slot="tip" class="el-upload__tip">
        只能上传jpg/png文件，且不超过500kb
      </div>
    </el-upload>
    <el-button
      style="margin-left: 10px"
      size="small"
      type="success"
      @click="uploadAllFile"
      >上传到服务器</el-button
    >

    <el-table :data="captchaList">
      <el-table-column prop="name" label="验证码图片名"> </el-table-column>
      <el-table-column label="操作" width="100">
        <template slot-scope="scope">
          <el-button @click="handlePreview(scope.row)" type="text" size="small"
            >查看</el-button
          >
          <el-button @click="handleDel(scope.row)" type="text" size="small"
            >删除</el-button
          >
        </template>
      </el-table-column>
    </el-table>

    <hr />

    <el-table :data="templateList">
      <el-table-column prop="name" label="模板图片名"> </el-table-column>
      <el-table-column label="操作" width="100">
        <template slot-scope="scope">
          <el-button
            @click="templateHandlePreview(scope.row)"
            type="text"
            size="small"
            >查看</el-button
          >
          <el-button
            @click="templateHandleDel(scope.row)"
            type="text"
            size="small"
            >删除</el-button
          >
        </template>
      </el-table-column>
    </el-table>

    <image-dialog :dialogVisable="dialogVisable"></image-dialog>
  </div>
</template>

<script>
import {pushImage} from "../../api/index";
import imageDialog from "./imageDialog.vue";

export default {
  name: "",
  components: { imageDialog },
  props: {},
  data() {
    return {
      captchaList: [],
      captcha: {
        name: "",
        base64String: "",
      },
      templateList: [],
      muban: {
        name: "",
        base64String: "",
      },
      dialogVisable: {
        visable: false,
      },
      sliderCaptcha: {
        originalImage: "",
        sliderImage: "",
      },
      pushdata: [],
    };
  },
  computed: {},
  watch: {},
  methods: {
    getBase64(file) {
      return new Promise(function (resolve, reject) {
        const reader = new FileReader();
        let imgResult = "";
        reader.readAsDataURL(file);
        reader.onload = function () {
          imgResult = reader.result;
          imgResult = imgResult.substring(22);
        };
        reader.onerror = function (error) {
          reject(error);
        };
        reader.onloadend = function () {
          resolve(imgResult);
        };
      });
    },
    handleChange(param) {
      this.captcha = {
        name: "",
        base64String: "",
      };
      if (param.size > 500 * 10000) {
        this.$message.error("图片大小不能超过500KB");
        return;
      }
      let name = param.name;
      name = name.substring(name.length - 3);
      if (name != "png") {
        this.$message.error("请选择png格式的图片");
        return;
      }
      this.captcha.name = param.name;
      this.getBase64(param.raw).then((res) => {
        this.captcha.base64String = res;
        this.captchaList.push(this.captcha);
      });
    },
    templateHandleChange(param) {
      this.muban = {
        name: "",
        base64String: "",
      };
      if (param.size > 500 * 10000) {
        this.$message.error("图片大小不能超过500KB");
        return;
      }
      let name = param.name;
      name = name.substring(name.length - 3);
      if (name != "png") {
        this.$message.error("请选择png格式的图片");
        return;
      }
      this.muban.name = param.name;
      this.getBase64(param.raw).then((res) => {
        this.muban.base64String = res;
        this.templateList.push(this.muban);
      });
    },
    uploadAllFile() {
      let size = 0;
      if (this.captchaList.length > this.templateList.length) {
        size = this.templateList.length;
        for (let i = 0; i < this.templateList.length; i++) {
          this.sliderCaptcha.originalImage = this.captchaList[i].base64String;
          this.sliderCaptcha.sliderImage = this.templateList[i].base64String;
          this.pushdata.push(this.sliderCaptcha);
        }
      } else {
        size = this.captchaList.length;
        for (let i = 0; i < this.captchaList.length; i++) {
          this.sliderCaptcha.originalImage = this.captchaList[i].base64String;
          this.sliderCaptcha.sliderImage = this.templateList[i].base64String;
          this.pushdata.push(this.sliderCaptcha);
        }
      }
      this.templateList.splice(0,size);
      this.captchaList.splice(0,size);
      let data = JSON.stringify(this.pushdata);
      console.log(data);
      pushImage(data).then(res=>{
        if(res==true){
          this.$message.success("提交成功")
        }else{
          this.$message.error("提交失败")
        }
      })
      console.log(this.pushdata)
      this.pushdata=[];
    },
    handlePreview(row) {
      let s = row.name;
      let index = 0;
      for (let i = 0; i < this.captchaList.length; i++) {
        if (this.captchaList[i].name == s) {
          index = i;
          break;
        }
      }
      let data = JSON.parse(JSON.stringify(this.captchaList[index]));
      this.$bus.$emit("captchaData", data);
      this.dialogVisable.visable = true;
    },
    handleDel(row) {
      let s = row.name;
      let index = 0;
      for (let i = 0; i < this.captchaList.length; i++) {
        if (this.captchaList[i].name == s) {
          index = i;
          break;
        }
      }
      this.captchaList.splice(index, 1);
    },
    templateHandlePreview(row) {
      let s = row.name;
      let index = 0;
      for (let i = 0; i < this.templateList.length; i++) {
        if (this.templateList[i].name == s) {
          index = i;
          break;
        }
      }
      let data = JSON.parse(JSON.stringify(this.templateList[index]));
      this.$bus.$emit("captchaData", data);
      this.dialogVisable.visable = true;
    },
    templateHandleDel(row) {
      let s = row.name;
      let index = 0;
      for (let i = 0; i < this.templateList.length; i++) {
        if (this.templateList[i].name == s) {
          index = i;
          break;
        }
      }
      this.templateList.splice(index, 1);
    },
  },
  created() {},
  mounted() {},
  beforeCreate() {},
  beforeMount() {},
  beforeUpdate() {},
  updated() {},
  beforeDestroy() {},
  destroyed() {},
  activated() {},
};
</script>
<style scoped>
</style>